<template>
  <van-tabbar v-model="active" active-color="#FD7753" route>
    <van-tabbar-item to="/home" name="/home">
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? home1 : home" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/job" name="/job">
      <span>岗位</span>
      <template #icon="props">
        <img :src="props.active ? company1 : company" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/mine" name="/mine">
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? mine1 : mine" /> </template
    ></van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import home from "../assets/img/home_icon.png";
import home1 from "../assets/img/home_icon_act.png";
import company from "../assets/img/company_icon.png";
import company1 from "../assets/img/company_icon_act.png";
import mine from "../assets/img/mine_icon.png";
import mine1 from "../assets/img/mine_icon_act.png";
const active = ref("/home");
const route = useRoute(); //此处的route就相当于原本的this.$route
// console.log(route);
active.value = route.path;
console.log(active.value);
</script>

<style scoped></style>
